<template>
  <div class="page-container" v-loading="loading">
    <div class="page-content" ref="scrollEl">
      <div class="panel-container">
        <el-form ref="elForm" :model="formData" :rules="rules" size="mini" label-width="140px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="信息标题:" prop="title">
                <el-input autocomplete="on" name="title" v-model="formData.title" placeholder="请输入信息标题" clearable :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="所属分类:" prop="c1">
                <div class="line">
                  <el-cascader v-model="cateValue" :options="cateList" :props="{ checkStrictly: true, value: 'num_id', label: 'name' }" @change="handleCateChange" clearable></el-cascader>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="标签:" prop="key_words" class="form-keyword">
                <el-checkbox-group v-model="selectedKeywordList" size="mini">
                  <el-checkbox v-for="(item, index) in keywordList" :key="index" :label="item">{{ item }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="newMarksList.length > 0">
              <el-form-item label="">
                <el-tag v-for="item in newMarksList" :key="item.id" disable-transitions closable style="margin-right: 6px; margin-bottom: 4px" @close="handleTagDelete(item)">
                  {{ item.name }}
                </el-tag>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="信息图片:" prop="images">
                <ImageDraggable ref="imageDraggable" infoType="asset" @change="handleImagesChange" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="15s短视频:" prop="video_url">
                <VideoUpload ref="videoUpload" @change="handleVideoChange" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="信息介绍:" prop="desc">
                <el-switch active-text="信息图片及短视频一键填充" v-model="fullImagesAndVideo" @change="handleFullImagesAndVideo"></el-switch>
              </el-form-item>
              <el-form-item label="">
                <!-- <tinymce ref="tinymce" v-model="formData.desc" placeholder="请输入" :height="300" infoType="asset" :key="'alonePublish' + tinymceFlag"></tinymce> -->
                <TinyMCE ref="tinymce" v-model="formData.desc" :height="500" infoType="asset" :key="'alonePublish' + tinymceFlag" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="数量:" prop="vol">
                <el-input autocomplete="on" name="vol" v-model="formData.vol" placeholder="请输入数量" type="number" :style="{ width: '100%' }"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label-width="0" prop="unit">
                <div class="line">
                  <el-radio-group v-model="formData.unit" size="mini">
                    <el-radio v-for="(item, index) in unitList" :key="index" :label="item">{{ item }}</el-radio>
                  </el-radio-group>
                  <el-input v-model="inputUnit" placeholder="自定义单位" clearable style="width: 20%; margin: 0 10px"> </el-input>
                  <el-button type="text" icon="el-icon-plus" size="mini" @click="handleUnitAdd"> 添加 </el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="所在地:" prop="shi_id">
                <AreaSelect ref="areaSelect" :list="areaList" @change="handleAreaChange" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="价值等级:" prop="value">
                <el-radio-group v-model="formData.value" size="mini">
                  <el-radio v-for="(item, index) in valueList" :key="index" :label="item.value" :disabled="item.disabled">{{ item.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="估值:" prop="valuation">
                <el-radio-group v-model="formData.valuation" size="mini">
                  <el-radio v-for="item in valuationList" :key="item.value" :label="item.value" :disabled="item.disabled">{{ item.key }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="信息来源:" prop="source">
                <el-radio-group v-model="formData.source" size="mini">
                  <template v-for="(item, index) in sourceList">
                    <el-radio :key="'radio' + index" :label="item.value" :disabled="item.disabled">{{ item.label }}</el-radio>
                    <a class="link" v-if="editModel === 'edit' && formData.source === 6 && item.value === 6" :key="'a' + index" :href="spiderUrl" target="_blank">{{ spiderUrl }}</a>
                  </template>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="form-panel">
            <div class="title">发布人信息</div>
            <div class="desc">
              <span class="red"> * </span>
              联系电话至少填一个
            </div>
            <el-row :gutter="20">
              <el-col :xl="6" :lg="12">
                <el-form-item label="手机号:" prop="user_phone">
                  <el-input autocomplete="on" name="user_phone" v-model="formData.user_phone" placeholder="请输入发布人手机号" clearable :style="{ width: '100%' }" @blur="handlePhoneBlur" @input="handleInput($event, 'user_phone')"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :xl="12" :lg="12">
                <el-button type="text" size="mini" @click="handleView('user_phone', '资产')" :disabled="!formData.user_phone" title="请输入发布人手机号"> 查看发布过的资产信息 </el-button>
                <el-button type="text" size="mini" @click="handleView('user_phone', '独享')" :disabled="!formData.user_phone" title="请输入发布人手机号"> 查看发布过的独享信息 </el-button>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :xl="6" :lg="12">
                <el-form-item label="座机号/次要手机号:" prop="user_tel">
                  <el-input autocomplete="on" name="user_tel" v-model="formData.user_tel" placeholder="请输入发布人手机号" clearable :style="{ width: '100%' }" @input="handleInput($event, 'user_tel')"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :xl="12" :lg="12">
                <el-button type="text" size="mini" @click="handleView('user_tel', '资产')" :disabled="!formData.user_tel" title="请输入座机号/次要手机号"> 查看发布过的资产信息 </el-button>
                <el-button type="text" size="mini" @click="handleView('user_tel', '独享')" :disabled="!formData.user_tel" title="请输入座机号/次要手机号"> 查看发布过的独享信息 </el-button>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :xl="6" :lg="12">
                <el-form-item label="其他联系方式:" prop="other_ways">
                  <el-input autocomplete="on" name="other_ways" v-model="formData.other_ways" placeholder="请输入发布人手机号" clearable :style="{ width: '100%' }" @input="handleInput($event, 'other_ways')"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :xl="12" :lg="12">
                <el-button type="text" size="mini" @click="handleView('other_ways', '资产')" :disabled="!formData.other_ways" title="请输入其他联系方式"> 查看发布过的资产信息 </el-button>
                <el-button type="text" size="mini" @click="handleView('other_ways', '独享')" :disabled="!formData.other_ways" title="请输入其他联系方式"> 查看发布过的独享信息 </el-button>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :xl="12" :lg="24">
                <el-form-item label="处置周期:" prop="cycle">
                  <el-radio-group v-model="formData.cycle" size="mini">
                    <el-radio v-for="item in cycleList" :key="item.value" :label="item.value" :disabled="item.disabled">{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :xl="6" :lg="12">
                <el-form-item label="姓名:" prop="user_name">
                  <el-input autocomplete="on" name="user_name" v-model="formData.user_name" placeholder="请输入姓名" maxlength="32" clearable :style="{ width: '100%' }"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="12">
                <el-form-item label="公司名称:" prop="company_name">
                  <el-input autocomplete="on" name="company_name" v-model="formData.company_name" placeholder="请输入公司名称" maxlength="32" clearable :style="{ width: '100%' }"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="12">
                <el-form-item label="公司地址:" prop="com_shi_id">
                  <AreaSelect ref="areaSelectCom" :list="areaList" @change="handleComAreaChange" />
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="12">
                <el-form-item label="详细地址:" prop="com_address">
                  <el-input autocomplete="on" name="com_address" v-model="formData.com_address" placeholder="请输入详细地址" maxlength="32" clearable :style="{ width: '100%' }"> </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="所属行业:" prop="industry_id">
                  <el-select v-model="formData.industry_id" placeholder="请选择" clearable :style="{ width: '100%' }" @change="handleIndustryChange">
                    <el-option v-for="(item, index) in industryList" :key="index" :label="item.key" :value="item.value" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item label="备注:" prop="remark">
                  <el-input autocomplete="on" name="remark" v-model="formData.remark" placeholder="请输入备注" clearable :style="{ width: '100%' }"> </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
    </div>
    <div class="fixed-container">
      <div class="fixed-content">
        <div class="panel-container panel-container-bottom">
          <div class="panel-content" v-if="editModel === 'add'">
            <el-button size="mini" @click="handleClose">取消</el-button>
            <el-button size="mini" type="primary" @click="handleSubmit">发布</el-button>
            <el-button size="mini" type="primary" @click="handleSubmit('next')">发布并创建下一条</el-button>
          </div>
          <div class="panel-content" v-if="editModel === 'edit'">
            <el-button size="mini" @click="handleClose">取消</el-button>
            <el-button size="mini" type="primary" @click="handleEdit(1)">保存</el-button>
            <el-button size="mini" type="danger" @click="handleDelete">删除</el-button>
          </div>
        </div>
      </div>
    </div>

    <!--  查看发布过的资产信息 -->
    <el-dialog title="查看发布过的资产信息" :visible.sync="showDialogAssets" width="60%">
      <DialogAssets :phone="publishedPhone" v-if="showDialogAssets" @close="showDialogAssets = false" />
    </el-dialog>

    <!--  查看发布过的独享信息 -->
    <el-dialog title="查看发布过的独享信息" :visible.sync="showDialogAlone" width="60%">
      <DialogAlone :phone="publishedPhone" v-if="showDialogAlone" @close="showDialogAlone = false" />
    </el-dialog>
  </div>
</template>
<script>
import { apiAssetBaseInfo, apiAssetKeyWords, apiGetAllLabel, apiSelectCateToIndus } from '@/api/assetsPublic'
import { apiNoShareAdd, apiNoShareEdit, apiNoShareDetail, apiNoShareFindPhone, apiNoShareDel } from '@/api/assetsAlone'
// import tinymce from '@/components/Tinymce'
import TinyMCE from '@/components/TinyMCE7'
import ImageDraggable from '@/components/audio/ImageDraggable.vue'
import VideoUpload from '@/components/audio/VideoUpload.vue'
import AreaSelect from '@/components/AreaSelect.vue'
import { isMobile } from '@/utils/validate'
import DialogAssets from './components/DialogAssets.vue'
import DialogAlone from './components/DialogAlone.vue'

export default {
  name: 'AlonePublish',
  components: { TinyMCE, ImageDraggable, VideoUpload, AreaSelect, DialogAssets, DialogAlone },
  props: [],
  data() {
    var validaMobile = (rule, value, callback) => {
      if (value && !isMobile(value)) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    var validaMobile2 = (rule, value, callback) => {
      if (value && !/^[0-9-]*$/.test(value)) {
        callback(new Error('请输入数字、-'))
      } else {
        callback()
      }
    }
    var validaMobile3 = (rule, value, callback) => {
      if (value && !/^[0-9a-zA-Z_-]*$/.test(value)) {
        callback(new Error('请输入数字、字母、下划线、-'))
      } else {
        callback()
      }
    }
    var validaMobileRequired = (rule, value, callback) => {
      if (!this.formData.user_phone && !this.formData.user_tel && !this.formData.other_ways) {
        callback(new Error('联系方式至少填写一个'))
      } else {
        callback()
      }
    }
    return {
      tinymceFlag: 1,
      publishedPhone: '',
      showDialogAssets: false,
      showDialogAlone: false,
      queryId: '',
      loading: false,
      editModel: 'add',
      spiderUrl: '',
      formData: {
        title: '',
        desc: '',
        user_name: '',
        user_phone: '',
        user_tel: '',
        other_ways: '',
        cycle: 1,
        sheng_id: '',
        shi_id: '',
        zone_id: '',
        c1: '',
        c2: '',
        vol: '',
        unit: '台',
        images: [],
        video_url: '',
        key_words: '',
        new_marks: '',
        value: 1,
        valuation: 8,
        company_name: '',
        com_sheng_id: '',
        com_shi_id: '',
        com_zone_id: '',
        com_address: '',
        industry_id: '15',
        remark: '',
        industry: '中小企业及其它',
        source: 1,
      },
      rules: {
        title: [{ required: true, message: '请输入信息标题', trigger: 'blur' }],
        c1: [{ required: true, message: '请选择所属分类', trigger: 'change' }],
        desc: [{ required: true, message: '请输入信息介绍', trigger: 'change' }],
        shi_id: [{ required: true, message: '请选择所在地', trigger: 'change' }],
        value: [{ required: true, message: '请选择价值等级', trigger: 'change' }],
        valuation: [{ required: true, message: '请选择估值', trigger: 'change' }],
        source: [{ required: true, message: '请选择信息来源', trigger: 'change' }],
        user_phone: [
          { validator: validaMobile, trigger: 'blur' },
          { validator: validaMobileRequired, trigger: 'blur' },
        ],
        user_tel: [
          { validator: validaMobile2, trigger: 'blur' },
          { validator: validaMobileRequired, trigger: 'blur' },
        ],
        other_ways: [
          // { validator: validaMobile3, trigger: 'blur' },
          { validator: validaMobileRequired, trigger: 'blur' },
        ],
      },
      fullImagesAndVideo: false,
      inputTag: '',
      inputUnit: '',
      cateValue: [],
      selectedKeywordList: [],
      keywordList: [],
      newMarksList: [],
      cateList: [],
      areaList: [],
      tagsList: [],
      industryList: [],
      unitList: [],
      valueList: [
        {
          label: '低',
          value: 1,
        },
        {
          label: '中',
          value: 2,
        },
        {
          label: '高',
          value: 3,
        },
      ],
      valuationList: [],
      sourceList: [
        {
          label: 'AI外呼',
          value: 1,
          disabled: false,
        },
        {
          label: '员工挖掘',
          value: 2,
          disabled: false,
        },
        {
          label: '社群',
          value: 3,
          disabled: false,
        },
        {
          label: '新媒体',
          value: 4,
          disabled: false,
        },
        {
          label: '其他',
          value: 5,
          disabled: false,
        },
      ],
      cycleList: [
        {
          label: '一次性',
          value: 1,
          disabled: false,
        },
        {
          label: '长期-月',
          value: 2,
          disabled: false,
        },
        {
          label: '长期-季度',
          value: 3,
          disabled: false,
        },
        {
          label: '长期-年',
          value: 4,
          disabled: false,
        },
      ],
    }
  },
  computed: {},
  watch: {
    selectedKeywordList() {
      this.formData.key_words = this.selectedKeywordList
    },
    newMarksList() {
      this.formData.new_marks = this.newMarksList.map((item) => JSON.stringify(item)).join('|')
    },
  },
  activated() {
    this.tinymceFlag++
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      this.getSelectList().then(() => {
        this.queryId = this.$route.query.id
        if (this.queryId) {
          this.editModel = 'edit'
          this.getDetail()
        } else {
          this.editModel = 'add'
        }
      })
    },
    // 获取详情
    getDetail() {
      this.loading = true
      apiNoShareDetail({ id: this.queryId })
        .then((res) => {
          this.loading = false
          this.setDetail(res.data)
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 设置详情数据
    setDetail(data) {
      for (let key in this.formData) {
        if (key === 'industry_id' || key === 'industry') {
          if (parseInt(data.industry_id) === 0) {
            continue
          }
        } else {
          this.formData.industry_id = data.industry_id.toString()
          this.formData.industry = data.industry
        }
        this.formData[key] = data[key]
      }
      this.formData.id = data.id
      if (this.formData.c2) {
        this.cateValue = [this.formData.c1, this.formData.c2]
      } else {
        this.cateValue = [this.formData.c1]
      }
      let keywordList = []
      if (this.formData.key_words) {
        keywordList = this.formData.key_words.split(',')
      }
      this.handleCateChange(this.cateValue).then((res) => {
        this.selectedKeywordList = keywordList
      })
      console.log(this.formData.new_marks, typeof this.formData.new_marks === 'string')
      if (typeof this.formData.new_marks === 'string') {
        this.newMarksList = JSON.parse(this.formData.new_marks)
      } else {
        this.newMarksList = this.formData.new_marks
      }
      this.$refs.imageDraggable.setValue(this.formData.images)
      this.$refs.videoUpload.setValue(this.formData.video_url)
      this.$refs.tinymce.setValue(this.formData.desc)
      this.$refs.areaSelect.setValue([this.formData.sheng_id, this.formData.shi_id, this.formData.zone_id])
      this.$refs.areaSelectCom.setValue([this.formData.com_sheng_id, this.formData.com_shi_id, this.formData.com_zone_id])
    },
    // 获取下拉数据
    getSelectList() {
      return Promise.all([
        this.$store.dispatch('select/getCateList').then((res) => {
          this.cateList = res
        }),
        this.$store.dispatch('select/getCityList').then((res) => {
          this.areaList = res
        }),
        this.$store.dispatch('select/getIndustryList').then((res) => {
          this.industryList = res
        }),
        apiAssetBaseInfo().then((res) => {
          const { unit, value } = res.data
          this.unitList = unit
          this.valuationList = value
        }),
      ])
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.fullImagesAndVideo = false
      this.inputTag = this.inputUnit = ''
      this.cateValue = this.selectedKeywordList = this.keywordList = this.newMarksList = []
      this.$refs.imageDraggable.reset()
      this.$refs.videoUpload.reset()
      this.$refs.tinymce.reset()
      this.$refs.areaSelect.reset()
      this.$refs.areaSelectCom.reset()
      if (this.editModel === 'edit') {
        this.formData.id = ''
      }
    },
    // 删除标签
    handleTagDelete(item) {
      this.newMarksList = this.newMarksList.filter((item1) => item1.id !== item.id)
    },
    // 获取系统自动打标签
    getAllLabel() {
      return new Promise((resolve, reject) => {
        // 分类标签拼在标题后面
        let title = this.formData.title + ',' + this.selectedKeywordList.join(',')
        apiGetAllLabel({
          title,
          content: this.formData.desc,
          c1: this.formData.c1,
          is_first_title: 1,
        })
          .then((res) => {
            if (typeof res.data === 'string') console.log(JSON.parse(res.data))
            this.newMarksList = res.data
            resolve()
          })
          .catch(() => {
            reject()
          })
      })
    },
    // 提交
    handleSubmit(type) {
      this.$refs['elForm'].validate((valid, message) => {
        if (!valid) {
          const name = Object.keys(message)[0]
          this.$message.error(message[name][0].message)
          this.$nextTick(() => {
            const el = document.querySelectorAll('.el-form-item__error')[0]
            el.scrollIntoView({ block: 'center', behavior: 'smooth' })
          })
          return
        }
        this.loading = true
        this.getAllLabel()
          .then(() => {
            apiNoShareAdd(this.formData)
              .then((res) => {
                this.loading = false
                this.$message({
                  message: '发布成功',
                  type: 'success',
                })
                setTimeout(() => {
                  if (type === 'next') {
                    this.resetForm()
                    window.scrollTo({ top: 0 })
                  } else {
                    this.handleClose()
                  }
                }, 1000)
              })
              .catch(() => {
                this.loading = false
              })
          })
          .catch(() => {
            this.loading = false
          })
      })
    },
    // 删除
    handleDelete() {
      window.enterPreventDefault = false
      this.$confirm('确认删除本条独享信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        window.enterPreventDefault = true
        this.loading = true
        apiNoShareDel({ id: this.queryId })
          .then((res) => {
            this.loading = false
            this.$message({
              message: '操作成功',
              type: 'success',
            })
            setTimeout(() => {
              this.handleClose()
            }, 1000)
          })
          .catch(() => {
            window.enterPreventDefault = true
          })
      })
      this.$refs['elForm'].validate((valid, message) => {
        if (!valid) {
          const name = Object.keys(message)[0]
          this.$message.error(message[name][0].message)
          this.$nextTick(() => {
            const el = document.querySelectorAll('.el-form-item__error')[0]
            el.scrollIntoView({ block: 'center', behavior: 'smooth' })
          })
          return
        }
        this.showDialogInvalid = true
      })
    },
    handleInvalidSuccess(reason) {
      this.formData.reason = reason
      this.showDialogInvalid = false
      this.handleEdit(3)
    },
    // 编辑
    handleEdit(action) {
      this.formData.action = action
      this.$refs['elForm'].validate((valid, message) => {
        if (!valid) {
          const name = Object.keys(message)[0]
          this.$message.error(message[name][0].message)
          this.$nextTick(() => {
            const el = document.querySelectorAll('.el-form-item__error')[0]
            el.scrollIntoView({ block: 'center', behavior: 'smooth' })
          })
          return
        }
        this.loading = true
        apiNoShareEdit({ ...this.formData })
          .then((res) => {
            this.loading = false
            this.$message({
              message: '操作成功',
              type: 'success',
            })
            setTimeout(() => {
              this.handleClose()
            }, 1000)
          })
          .catch(() => {
            this.loading = false
          })
      })
    },
    // 取消
    handleClose() {
      if (this.editModel === 'edit') {
        window.close()
      } else {
        this.$bus.$emit('assetsAloneListUpdate')
        this.$bus.$emit('closeSelectedTag', this.$route)
      }
    },
    // 添加单位
    handleUnitAdd() {
      if (!this.inputUnit || this.unitList.includes(this.inputUnit)) {
        return
      }
      apiAssetBaseInfo({ unit: this.inputUnit }).then((res) => {
        this.unitList.push(this.inputUnit)
        this.inputUnit = ''
      })
    },
    // 图片变动
    handleImagesChange(value) {
      this.formData.images = value
        .filter((item) => item.status === 'success')
        .map((item) => item.onlineUrl)
        .join('|')
    },
    // 视频变动
    handleVideoChange(value) {
      this.formData.video_url = value
    },
    // 信息图片及短视频一键填充
    handleFullImagesAndVideo(value) {
      if (value) {
        let content = ''
        if (this.formData.images.length > 0) {
          this.formData.images.split('|').forEach((item) => {
            content += `<p><img src="${item}" style="width:auto;max-width:100%;height:auto" /></p>`
          })
        }
        if (this.formData.video_url) {
          content += `
            <p>
              <span class="mce-preview-object mce-object-video" contenteditable="false"
               data-mce-object="video" data-mce-p-allowfullscreen="allowfullscreen"
                data-mce-p-frameborder="no" data-mce-p-scrolling="no"
                 data-mce-p-src="${this.formData.video_url}" >
                 <div><video controls="controls" style="width:auto;max-width:100%;height:auto">
                  <source src="${this.formData.video_url}" type="video/mp4" />
                  </video></div>
              </span>
            </p>`
        }
        if (content) {
          this.$refs.tinymce.insertContent(content)
        }

        // this.$nextTick(() => {
        //   console.log(this.formData.desc, 222)
        // })
      }
    },
    // 选择分类
    handleCateChange(value) {
      return new Promise((resolve, reject) => {
        this.selectedKeywordList = []
        value[0] ? (this.formData.c1 = value[0]) : (this.formData.c1 = '')
        value[1] ? (this.formData.c2 = value[1]) : (this.formData.c2 = '')
        if (value && value.length > 0) {
          const length = value.length
          const cate_id = value[length - 1]
          apiAssetKeyWords({
            cate_id,
            level: value.length === 1 ? 1 : 2,
            info_type: 1,
          }).then((res) => {
            this.keywordList = res.data
            resolve()
          })
        } else {
          this.keywordList = []
          resolve()
        }

        // 分类和发布人信息所属行业联动
        apiSelectCateToIndus({ cate_id: value[1] ? value[1] : value[0] }).then((res) => {
          const { key, value } = res.data
          this.formData.industry_id = value
          this.formData.industry = key
        })
      })
    },
    // 选择地区
    handleAreaChange(value) {
      this.formData.sheng_id = value[0]
      this.formData.shi_id = value[1]
      this.formData.zone_id = value[2]
      // 公司名称和地址联动
      const areaName = this.getAreaName(value)
      if (areaName.length === 1) {
        this.formData.company_name = areaName[0] + '地区某公司'
      } else if (areaName.length > 1) {
        this.formData.company_name = areaName[1] + '地区某公司'
      } else {
        this.formData.company_name = ''
      }
      this.$refs.areaSelectCom.reset()
      this.$refs.areaSelectCom.setValue(value)
    },
    // 选择公司所在地区
    handleComAreaChange(value) {
      this.formData.com_sheng_id = value[0]
      this.formData.com_shi_id = value[1]
      this.formData.com_zone_id = value[2]
    },
    getAreaName(value) {
      let name = []
      if (value[0]) {
        const sheng = this.areaList.find((item) => item.code === value[0])
        name.push(sheng.name)
        if (sheng && value[1]) {
          const shi = sheng.children.find((item) => item.code === value[1])
          name.push(shi.name)
          if (shi && value[2]) {
            const qu = shi.children.find((item) => item.code === value[2])
            name.push(qu.name)
          }
        }
      }
      return name
    },
    handleIndustryChange(value) {
      const item = this.industryList.find((item) => item.value === value)
      if (item) {
        this.formData.industry = item.key
      } else {
        this.formData.industry = ''
      }
    },
    // 输入手机号获取信息
    handlePhoneBlur() {
      if (!this.formData.user_phone) {
        return
      }
      apiNoShareFindPhone({ phone: this.formData.user_phone, flag: 1 }).then((res) => {
        const { data } = res
        for (let key in data) {
          if (data[key] !== '') {
            if (key === 'industry_id' || key === 'industry') {
              //  行业和公司地址不显示上次数据
            } else if (key in this.formData) {
              this.formData[key] = data[key]
            }
          }
        }
        //  行业和公司地址不显示上次数据
        // this.$refs.areaSelectCom.setValue([data.com_sheng_id, data.com_shi_id, data.com_zone_id])
      })
    },
    // 查看发布过的信息
    handleView(phone, type) {
      this.publishedPhone = this.formData[phone]
      if (type === '资产') {
        this.showDialogAssets = true
      } else if (type === '独享') {
        this.showDialogAlone = true
      }
    },
    handleInput(e, type) {
      this.handleTrim(type)
      this.formValidate()
    },
    handleTrim(type) {
      this.formData[type] = this.formData[type].replace(/\s/g, '')
    },
    formValidate() {
      this.$refs['elForm'].validate()
    },
  },
}
</script>
<style lang="scss" scoped>
.line {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.form-panel {
  width: 100%;
  background: #f0f1f4;
  padding: 10px;
  border-radius: 4px;
  .title {
    padding-left: 10px;
    font-size: 14px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
    line-height: 28px;
    margin-bottom: 10px;
    color: #333333;
  }
  .desc {
    width: 140px;
    text-align: right;
    padding-right: 12px;
    margin-bottom: 10px;
    color: #333333;
    .red {
      color: #f56c6c;
    }
  }
}
.el-upload__tip {
  line-height: 1.2;
}
.panel-container {
  padding-bottom: 70px;
}
.fixed-container {
  position: fixed;
  right: 0;
  bottom: 0;
  width: calc(100% - 140px);
  padding: 0 10px;
  z-index: 100;
  .panel-container {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 6px;
    margin: 0;
  }
}
.panel-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.link {
  font-size: 16px;
  color: #409eff;
  text-decoration: underline;
  margin-right: 10px;
}
.form-keyword .el-checkbox {
  width: 170px;
  margin-right: 0px;
}
</style>
